<template>
  <div class="settings-container">
    <el-dropdown @command="handleLayoutChange">
      <el-button circle>
        <el-icon><Setting /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            :command="LayoutEnum.MENU" 
            :disabled="settingsStore.layoutType === LayoutEnum.MENU"
          >
            侧边栏布局
          </el-dropdown-item>
          <el-dropdown-item 
            :command="LayoutEnum.HEADER" 
            :disabled="settingsStore.layoutType === LayoutEnum.HEADER"
          >
            顶部导航布局
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { Setting } from '@element-plus/icons-vue'
import { LayoutEnum } from '@/stores/types'
import { settingsStore } from '@/stores'

const handleLayoutChange = (command: LayoutEnum) => {
  settingsStore.setLayoutType(command)
}
</script>

<style scoped lang="scss">
.settings-container {
  margin-right: 15px;
}
</style>